<script setup lang='ts'>
import { IAliFileItem, IAliGetForderSizeModel } from '../../aliapi/alimodels'
import AliFile from '../../aliapi/file'
import { useFootStore, usePanFileStore, usePanTreeStore } from '../../store'
import { copyToClipboard } from '../../utils/electronhelper'
import message from '../../utils/message'
import { modalCloseAll } from '../../utils/modal'
import { humanDateTimeDateStr, humanSize, humanTime } from '../../utils/format'
import { ref } from 'vue'
import DebugLog from '../../utils/debuglog'
import { GetDriveID } from '../../aliapi/utils'
import { getEncType, getRawUrl } from '../../utils/proxyhelper'

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  istree: {
    type: Boolean,
    required: true
  },
  ispic: {
    type: Boolean,
    required: true
  }
})

const okLoading = ref(false)
const fileInfo = ref<IAliFileItem>()
const dirInfo = ref<IAliGetForderSizeModel>()
const dirPath = ref('')
const handleOpen = async () => {
  const pantreeStore = usePanTreeStore()
  let file_id = ''
  let drive_id = ''
  if (props.istree) {
    file_id = pantreeStore.selectDir.file_id
    drive_id = pantreeStore.selectDir.drive_id
  } else {
    const panfileStore = usePanFileStore()
    let fileList = panfileStore.GetSelected()
    if (fileList.length == 0) {
      const focus = panfileStore.mGetFocus()
      panfileStore.mKeyboardSelect(focus, false, false)
      fileList = panfileStore.GetSelected()
    }
    file_id = fileList[0].file_id
    drive_id = fileList[0].drive_id
  }
  if (props.ispic) {
    drive_id = GetDriveID(pantreeStore.user_id, 'pic')
  }
  if (!file_id) {
    message.error('没有选中任何文件')
  } else {
    let path_file_id = props.ispic ? 'pic_root' : file_id
    let fileName = pantreeStore.selectDir.name
    AliFile.ApiFileGetPathString(pantreeStore.user_id, drive_id, path_file_id, '/').then((data) => {
      dirPath.value = '/' + data + (props.ispic ? '/' + fileName : '')
    })
    fileInfo.value = await AliFile.ApiFileInfo(pantreeStore.user_id, drive_id, file_id, props.ispic)
    if (fileInfo.value && ['audio', 'video'].includes(fileInfo.value.category)) {
      const encType = getEncType(fileInfo.value)
      const category = fileInfo.value.category
      const rawUrl = await getRawUrl(
        pantreeStore.user_id, drive_id, file_id,
        encType, '',
        category === 'audio', category
      )
      if (typeof rawUrl == 'string') {
        message.error(rawUrl)
      } else if (rawUrl && rawUrl.url) {
        fileInfo.value.thumbnail = rawUrl.url
      }
    }
    if (fileInfo.value?.type == 'folder') {
      dirInfo.value = await AliFile.ApiFileGetFolderSize(pantreeStore.user_id, drive_id, file_id)
    }
  }
}

const handleClose = () => {

  if (okLoading.value) okLoading.value = false
  dirInfo.value = { size: 0, folder_count: 0, file_count: 0, reach_limit: undefined }
  fileInfo.value = undefined
  dirPath.value = ''
}

const makeFenBianLv = (width: number | undefined, height: number | undefined) => {
  if (!width) width = 0
  if (!height) height = 0
  if (width == 0 || height == 0) return ''
  return width + ' x ' + height
}

const makeImageSheBei = (exif: string | undefined) => {
  if (!exif) return ''
  try {
    let msg = ''
    const exobj = JSON.parse(exif)
    if (exobj.Make && exobj.Make.value) msg += exobj.Make.value + ' '
    if (exobj.Model && exobj.Model.value) msg += exobj.Model.value + ' '
    return msg
  } catch (err: any) {
    DebugLog.mSaveWarning(exif, err)
  }
  return ''
}

const makeImageShiJian = (exif: string | undefined) => {
  if (!exif) return ''
  try {
    const exobj = JSON.parse(exif)
    if (exobj.DateTimeOriginal && exobj.DateTimeOriginal.value) return exobj.DateTimeOriginal.value
    if (exobj.DateTimeDigitized && exobj.DateTimeDigitized.value) return exobj.DateTimeDigitized.value
    if (exobj.DateTime && exobj.DateTime.value) return exobj.DateTime.value
  } catch (err: any) {
    DebugLog.mSaveWarning(exif, err)
  }
  return ''
}

const handleAudioPlay = () => {
  useFootStore().mSaveAudioUrl('')
}

const formateSize = ref(true)
const handleSize = () => {
  formateSize.value = !formateSize.value
}

const handleHide = () => {
  modalCloseAll()
}

const handleCopyFileName = () => {
  if (fileInfo.value?.name) {
    copyToClipboard(fileInfo.value?.name)
    message.success('文件名已复制到剪切板')
  }
}
const handleCopyJson = () => {
  if (fileInfo.value) {
    copyToClipboard(JSON.stringify(fileInfo.value))
    message.success('文件信息已复制到剪切板')
  }
}
const handleCopyDownload = () => {
  const pantreeStore = usePanTreeStore()
  if (fileInfo.value) {
    getRawUrl(pantreeStore.user_id, pantreeStore.drive_id, fileInfo.value.file_id || '', getEncType(fileInfo.value)).then(data => {
      if (data && typeof data !== 'string' && data.url) {
        copyToClipboard(data.url)
        message.success('下载链接已复制到剪切板，4小时内有效')
      } else {
        message.error('下载链接获取失败，请稍后重试')
      }
    })
  } else {
    message.error('下载链接获取失败，请稍后重试')
  }
}
const handleCopyThumbnail = () => {
  if (fileInfo.value?.thumbnail) {
    copyToClipboard(fileInfo.value?.thumbnail)
    message.success('预览链接已复制到剪切板')
  }
}
</script>

<template>
  <a-modal :visible='visible' modal-class='modalclass shuxingmodal' :footer='false' :unmount-on-close='true'
           :mask-closable='false' @cancel='handleHide' @before-open='handleOpen' @close='handleClose'>
    <template #title>
      <span class='modaltitle'>查看属性</span>
    </template>
    <div class='modalbody' style='width: 520px; max-height: calc(80vh - 100px); overflow-y: scroll'>
      <a-row>
        <a-col flex='auto'> 路径：</a-col>
      </a-row>
      <div class='pathtitle'>
        {{ dirPath }}
      </div>
      <div class='h16'></div>

      <a-row>
        <a-col flex='auto'> 文件名：</a-col>
      </a-row>
      <div class='shuxingbox'>
        <span class='shuxingtitle'>{{ fileInfo?.name }}</span>
        <a-button type='outline' size='mini' tabindex='-1' title='复制' @click='handleCopyFileName'>复制</a-button>
      </div>
      <div class='h16'></div>

      <a-row>
        <a-col flex='110px'> 文件大小： <i class='iconfont iconchakan link' title='点击切换格式' @click='handleSize'></i>
        </a-col>
        <a-col flex='auto'></a-col>
        <a-col flex='170px'> 创建日期：</a-col>
        <a-col flex='auto'></a-col>
        <a-col flex='180px'> 更新日期：</a-col>
      </a-row>
      <a-row>
        <a-col flex='110px'>
          <a-input size='small' tabindex='-1'
                   :model-value="formateSize ? humanSize(fileInfo?.size || dirInfo?.size || 0) : (fileInfo?.size || dirInfo?.size || 0) + ' 字节'"
                   readonly />
        </a-col>
        <a-col flex='auto'></a-col>
        <a-col flex='170px'>
          <a-input size='small' tabindex='-1' :model-value='humanDateTimeDateStr(fileInfo?.created_at)' readonly />
        </a-col>
        <a-col flex='auto'></a-col>
        <a-col flex='180px'>
          <a-input size='small' tabindex='-1' :model-value='humanDateTimeDateStr(fileInfo?.updated_at)' readonly />
        </a-col>
      </a-row>
      <div class='h16'></div>

      <div v-if="fileInfo?.type == 'file'">
        <a-row>
          <a-col flex='110px'> 分类：</a-col>
          <a-col flex='auto'></a-col>
          <a-col flex='170px'> 媒体类型：</a-col>
          <a-col flex='auto'></a-col>
          <a-col flex='180px'> 描述：</a-col>
        </a-row>
        <a-row>
          <a-col flex='110px'>
            <a-input size='small' tabindex='-1' :model-value='fileInfo?.category' readonly />
          </a-col>
          <a-col flex='auto'></a-col>
          <a-col flex='170px'>
            <a-input size='small' tabindex='-1' :model-value='fileInfo?.mime_type' readonly />
          </a-col>
          <a-col flex='auto'></a-col>
          <a-col flex='180px'>
            <a-input size='small' tabindex='-1' :model-value='fileInfo?.description' readonly />
          </a-col>
        </a-row>
        <div class='h16'></div>

        <a-row>
          <a-col flex='1'> SHA1：</a-col>
        </a-row>
        <a-row>
          <a-col flex='1'>
            <a-input size='small' class='small' tabindex='-1' :model-value='fileInfo?.content_hash' readonly />
          </a-col>
        </a-row>
      </div>
      <div v-else>
        <a-row>
          <a-col flex='1'> 文件夹信息：</a-col>
        </a-row>
        <a-row>
          <a-col flex='1'>
            <a-input size='small' class='small' tabindex='-1'
                     :model-value="'子文件大小：' + humanSize(dirInfo?.size) + '，子文件：' + dirInfo?.file_count + '个，子文件夹：' + dirInfo?.folder_count + '个'"
                     readonly />
          </a-col>
        </a-row>
      </div>

      <div v-if="fileInfo?.category == 'video'">
        <div class='h16'></div>
        <a-row>
          <a-col flex='110px'> 分辨率：</a-col>
          <a-col flex='auto'></a-col>
          <a-col flex='170px'> 视频时长：</a-col>
          <a-col flex='auto'></a-col>
          <a-col flex='180px'> 制作日期：</a-col>
        </a-row>
        <a-row>
          <a-col flex='110px'>
            <a-input size='small' tabindex='-1'
                     :model-value='makeFenBianLv(fileInfo?.video_media_metadata?.width, fileInfo?.video_media_metadata?.height)'
                     readonly />
          </a-col>
          <a-col flex='auto'></a-col>
          <a-col flex='170px'>
            <a-input size='small' tabindex='-1' :model-value='humanTime(fileInfo?.video_media_metadata?.duration)'
                     readonly />
          </a-col>
          <a-col flex='auto'></a-col>
          <a-col flex='180px'>
            <a-input size='small' tabindex='-1'
                     :model-value='humanDateTimeDateStr(fileInfo?.video_media_metadata?.time)' readonly />
          </a-col>
        </a-row>
      </div>

      <div v-if="fileInfo?.category == 'image'">
        <div class='h16'></div>
        <a-row>
          <a-col flex='110px'> 分辨率：</a-col>
          <a-col flex='auto'></a-col>
          <a-col flex='170px'> 拍摄设备：</a-col>
          <a-col flex='auto'></a-col>
          <a-col flex='180px'> 拍摄日期：</a-col>
        </a-row>
        <a-row>
          <a-col flex='110px'>
            <a-input size='small' tabindex='-1'
                     :model-value='makeFenBianLv(fileInfo?.image_media_metadata?.width, fileInfo?.image_media_metadata?.height)'
                     readonly />
          </a-col>
          <a-col flex='auto'></a-col>
          <a-col flex='170px'>
            <a-input size='small' tabindex='-1' :model-value='makeImageSheBei(fileInfo?.image_media_metadata?.exif)'
                     readonly />
          </a-col>
          <a-col flex='auto'></a-col>
          <a-col flex='180px'>
            <a-input size='small' tabindex='-1' :model-value='makeImageShiJian(fileInfo?.image_media_metadata?.exif)'
                     readonly />
          </a-col>
        </a-row>
      </div>

      <div v-if="fileInfo?.category == 'audio'">
        <div class='h16'></div>
        <div width='100%'>
          <audio controls style='width: 100%; height: 32px' :src='fileInfo?.thumbnail' @play='handleAudioPlay'>
            您的浏览器不支持 audio 元素
          </audio>
        </div>
      </div>

      <div class='h16'></div>
    </div>
    <div class='h16'></div>
    <div class='modalfoot'>
      <a-button type='outline' size='small' @click='handleCopyJson'>复制JSON</a-button>
      <div style='flex-grow: 1'></div>
      <template v-if="fileInfo?.description && !fileInfo?.description.includes('xbyEncrypt')">
        <a-button v-if="fileInfo?.category == 'video'" type='outline' size='small' @click='handleCopyThumbnail'>
          复制M3U8链接
        </a-button>
        <a-button v-if="fileInfo?.category == 'audio'" type='outline' size='small' @click='handleCopyThumbnail'>
          复制M3U8链接
        </a-button>
      </template>
      <a-button v-if="fileInfo?.type !== 'folder'" type='outline' size='small' @click='handleCopyDownload'>
        复制下载链接
      </a-button>
    </div>
  </a-modal>
</template>

<style>
.shuxingbox {
  width: 100%;

  background-color: rgba(132, 133, 141, 0.08);
  border-radius: 4px;
  -webkit-backdrop-filter: saturate(150%) blur(30px);
  backdrop-filter: saturate(150%) blur(30px);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shuxingtitle {
  color: rosybrown;
  margin: 0;
  max-width: calc(100% - 48px);
  display: inline-block;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  user-select: text;
}

.shuxingbox button {
  align-self: flex-end;
  padding: 0 8px;
}

.pathtitle {
  color: var(--color-text-3);
  margin: 0;
  max-width: calc(100%);
  display: inline-block;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  user-select: text;

  background-color: var(--color-fill-2);
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
}

.h16 {
  padding-top: 16px;
}

.shuxingmodal .arco-input-wrapper {
  padding: 0 8px;
}

.shuxingmodal .small .arco-input {
  font-size: 13px !important;
  line-height: 22px !important;
}

i.link {
  color: rgb(var(--primary-6));
  cursor: pointer;
}
</style>
